<script lang="ts">
import { defineComponent } from "vue";

import PopupOverlay from "./overlay.vue";
import IconClose from "../icon/close.vue";

export default defineComponent({
  components: { PopupOverlay, IconClose },
  props: {
    modelValue: Boolean,
    title: String,
    round: { type: Boolean, default: true },
    showClose: { type: Boolean, default: true },
    safeAreaInsetBottom: { type: Boolean, default: true },
    backgroundColor: { type: String, default: "#ffffff" },
    zIndex: { type: Number, default: 98 },
  },
  emits: {
    "update:modelValue": (value: boolean) => typeof value === "boolean",
  },
  setup(props, ctx) {
    const closeClick = () => {
      ctx.emit("update:modelValue", false);
    };
    return { closeClick };
  },
});
</script>

<template>
  <PopupOverlay
    :modelValue="modelValue"
    :zIndex="zIndex"
    @update:modelValue="closeClick"
  />

  <uni-transition
    :show="modelValue"
    mode-class="slide-bottom"
    :styles="{
      position: 'fixed',
      left: 0,
      right: 0,
      bottom: 0,
      paddingTop: showClose || title ? '50rpx' : '',
      paddingBottom: safeAreaInsetBottom ? 'env(safe-area-inset-bottom)' : '',
      borderRadius: round ? '40rpx 40rpx 0 0' : '',
      backgroundColor,
      zIndex,
    }"
    @touchmove.stop
  >
    <view class="popup-bottom-close" v-if="showClose" @click="closeClick">
      <IconClose />
    </view>

    <view class="popup-bottom-title" v-if="title">{{ title }}</view>

    <slot />
  </uni-transition>
</template>

<style lang="scss">
.popup-bottom-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

.popup-bottom-title {
  margin: 0 60rpx 20rpx;
  font-size: 32rpx;
  color: #333333;
  line-height: 44rpx;
  text-align: center;
  font-weight: bold;
}
</style>